MVC is used for the development of Web Applications. MVC stands for Model View Controller. Whenever the user requests a webpage, first the request goes to the Controller, the Controller interacts with the appropriate Model and retrieves the data from the Model and binds the data to the View.
Whenever we develop any kind of Application using MVC, the best practice is to assign the data to Models. Using Models we can access the properties or data easily from anywhere in the application.
Whenever we create a new MVC project by default we will get the following folders structures such as App_Data, App_Start, Content, Controllers, Fonts, Models, Scripts, Views, etc.
From the above Folders, we mainly work with Models, Views & Controllers.
Models Folder Contains all the Models or the data required for the web application for example if we want to store the Employee related Information then we will create a Model with the name, say, EmployeeInfo.cs with the properties to assign and retrieve the data.
Let's create an ASP.NET MVC5 Web Application.
Open Visual Studio 2017 or any version based on your choice. In my case, I am using Visual Studio 2017.
Click on File --> New --> Project. Select "Web" from the left window. From the right window, select "ASP.Net Web Application (.NET Framework)". Give some name for the application & click OK. Select the MVC template and click OK.
Once the new project is created, we will get the following project's folder structure.
Now, in order to add a Model class in Models folder, right click on the Models folder, click on Add, and select the class template as shown in the below image.
Select a class template from the "Add New Item" window and give the Model Name as EmployeeInfo.cs. With this, a new Model is created.
Add the properties to the EmployeeInfo.cs as shown below.
- namespace MVCDemo.Models
- {
- public class EmployeeInfo
- {
- public int EmployeeId { get; set; }
- public string EmployeeName { get; set; }
- public string EmployeeDesignation { get; set; }
- public string DateOfJoining { get; set; }
- public string EmployeeAddress { get; set; }
- public string EmployeePassport { get; set; }
- public int EmployeePhone { get; set; }
- public int EmployeeAge { get; set; }
- public string EmployeeGender { get; set; }
- public string City { get; set; }
- public string Project { get; set; }
- public string EmployeeBloodGroup { get; set; }
- public string CompanyName { get; set; }
- public int PinCode { get; set; }
-
- }
- }
In order to add a controller, right-click on the Controllers folder, click on Add, and select Controller as shown below.
Select MVC5 Controller-Empty and click on Add.
And give the Controller name as "EmployeeInfoController" and click on Add. With this, a new Controller is added to the Controllers folder.
Create an Action Method as GetEmployeeInfo() in the above-created Controller that is "EmployeeInfoController.cs" by Creating an object of EmployeeInfo.cs and assigning the values to the Properties.
- public ActionResult GetEmployeeInfo()
- {
- EmployeeInfo employeeInfo = new EmployeeInfo()
- {
- EmployeeId = 1701,
- EmployeeName = "Khaja Moizuddin",
- EmployeeDesignation = "Software Engineer",
- DateOfJoining = "22/04/2010",
- EmployeeAddress = "16-1-10/3/4/C Swathi Apartments",
- EmployeePassport = "B-123-45-67",
- EmployeePhone = 0123456789,
- EmployeeAge = 30,
- EmployeeGender = "Male",
- City = "Hyderabad",
- Project = "RPA Tools",
- EmployeeBloodGroup = "AB+",
- CompanyName = "ABC Technologies",
- PinCode = 500045
- };
- return View(employeeInfo);
- }
Here we are passing the EmployeeInfo reference as a parameter in View, which returns the EmployeeInfo object to the View or .cshtml file. The .cshtml file uses the EmployeeInfo object for rendering as displaying to the end user.
In order to return List of EmployeeInfo object, we have added another Action Method called EmployeeInfoList, which is used for returning
list of EmployeeInfo objects from View.
![Models In ASP.NET MVC 5]()
- public ActionResult EmployeeInfoList()
- {
- List<EmployeeInfo> employeeInfoList = new List<EmployeeInfo>();
-
- employeeInfoList.Add(new EmployeeInfo()
- {
- EmployeeId = 1701,
- EmployeeName = "Khaja Moizuddin",
- EmployeeDesignation = "Software Engineer",
- DateOfJoining = "22/04/2010",
- EmployeeAddress = "16-1-10/3/4/C Swathi Apartments",
- EmployeePassport = "B-123-45-67",
- EmployeePhone = 0123456789,
- EmployeeAge = 30,
- EmployeeGender = "Male",
- City = "Hyderabad",
- Project = "RPA Tools",
- EmployeeBloodGroup = "AB+",
- CompanyName = "ABC Technologies",
- PinCode = 500045
- });
-
- employeeInfoList.Add(new EmployeeInfo()
- {
- EmployeeId = 1702,
- EmployeeName = "Vikas Biradar",
- EmployeeDesignation = "Senior Software Engineer",
- DateOfJoining = "22/04/2016",
- EmployeeAddress = "11-1-101/6/9/D Banjara Hills Colony",
- EmployeePassport = "A-123-45-67",
- EmployeePhone = 0123456789,
- EmployeeAge = 24,
- EmployeeGender = "Male",
- City = "Hyderabad",
- Project = "E-Commerce App",
- EmployeeBloodGroup = "O+",
- CompanyName = "Microsoft Corporation",
- PinCode = 500036
- });
-
- employeeInfoList.Add(new EmployeeInfo()
- {
- EmployeeId = 1703,
- EmployeeName = "Pavan",
- EmployeeDesignation = "Senior Software Engineer",
- DateOfJoining = "22/04/2014",
- EmployeeAddress = "Flat No 105-Jubilee Hills Road",
- EmployeePassport = "C-123-45-67",
- EmployeePhone = 0123456789,
- EmployeeAge = 21,
- EmployeeGender = "Male",
- City = "Hyderabad",
- Project = "PaymentGatewayApp",
- EmployeeBloodGroup = "B+",
- CompanyName = "Infosys",
- PinCode = 500035
- });
-
- employeeInfoList.Add(new EmployeeInfo()
- {
- EmployeeId = 1704,
- EmployeeName = "Sree",
- EmployeeDesignation = "Senior Software Engineer",
- DateOfJoining = "22/04/2016",
- EmployeeAddress = "Flat No 101- Akshay Apartment Kukatpally",
- EmployeePassport = "D-123-45-67",
- EmployeePhone = 0123456789,
- EmployeeAge = 23,
- EmployeeGender = "Female",
- City = "Hyderabad",
- Project = "GamingPortal",
- EmployeeBloodGroup = "A+",
- CompanyName = "Infosys",
- PinCode = 500035
- });
-
-
- return View(employeeInfoList);
- }
In the above code, we have added a list of EmployeeInfo reference as a parameter in View Method, which, in turn, returns to the View or .cshtml file for rendering and displaying the data to the End User.
To add a .cshtml file we need to right click on GetEmployeeInfo() Action Method & Click on Add View.
From the Add View Window, give the View Name as GetEmployeeInfo, Template as Create, and Model class as EmployeeInfo.cs and click on Add, with this GetEmployeeInfo.cshtml file will be added in Views Folder.
Add the below code in the GetEmployeeInfo.cshtml file.
Here in the above code, we are using two different ways of binding the data to the HTML, the first one is by using Model and the second one is by using HTML Helper Method.
Whenever the data is returned from a controller's Action Method or View Method, @model holds the data, which we can use for rendering the data to the HTML.
Similarly, to bind a list of EmployeeInfo objects to the HTML table, we need to create a .cshtml file by right click on EmployeeInfoList() Action Method & click on Add View.
In Add View Window, give View Name as "EmployeeInfoList", Template as Create, Model class as EmployeeInfo.cs & click on Add. With this method, EmployeeInfoList.cshtml will be added in Views Folder.
Add the below code in EmployeeInfoList.cshtml file.
In the above code, whenever the controller returns list of EmployeeInfo Object from EmployeeInfoList Action Method or View Method, the IEnumerable is used for holding the Collection of object in @model.
Here we are using two different ways to render the data to the View or .cshtml file.
The first one is by using Model, and the next one is by using the HTML Helper Method.
The output for the Single EmployeeInfo object with two different ways of rendering the data:
The output for the List of EmployeeInfo object with two different ways of rendering the data:
Thanks. I hope this helps you.